<template>
	<view class="index">
		<view class="cf bs6 p-15-10 mb10" :style="{background:subColor}">
			<view class="mb10" :style="{height:(more_height+'rpx'),overflow:'hidden'}">
				<u-grid :border="false" col="3">
					<u-grid-item v-for="(listItem,listIndex) in vipList" :key="listIndex">
						<view class="p-10-0 tac grid c0">
							<view class="grid-text f12 mb5">{{listItem.title}}</view>
							<view v-if="(listIndex+1)%3!==0" class="br"></view>
							<text class="f14 wei">{{listItem.num}}</text>
						</view>
					</u-grid-item>
				</u-grid>
				<u-toast ref="uToast" />
			</view>
			<view class="f-c-b c0 f12 p5" @click="more">
				<text class="mr5">{{text}}</text>
				<u-icon size="14" color="#000" :name="more_name" style="line-height: 56rpx;"></u-icon>
			</view>
		</view>
		<view class="p10 f18 wei6">浏览概况</view>
		<view class="charts-box">
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
		</view>
	</view>
</template>

<script>
	export default {
		// props: ["vipList", "vipdata"],
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				time: '',
				vipList: [{
					title: '下单人数',
					num: 0,
				}, {
					title: '下单新客',
					num: 0,
				}, {
					title: '客单价',
					num: 0,
				}, {
					title: '老用户复购率',
					num: 0,
				}, {
					title: '新增会员',
					num: 0,
				}, {
					title: '累计新增会员',
					num: 0,
				}],
				vipdata: {},
				queryForm: {
					timeType: 2,
					pageNo: 1,
					pageSize: 10,
				},
				text: '展开全部',
				more_name: 'arrow-down',
				more_height: 140,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						rotateLabel: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						area: {
							type: 'curve',
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true
						}
					},
					sjdata: {},
				}
			}
		},
		methods: {
			async fetchVips(q) {
				if(q.startTime && q.endTime){
					this.queryForm.startTime = q.startTime
					this.queryForm.endTime = q.endTime
					this.queryForm.timeType = 1
				}else{
					this.queryForm.timeType = q.timeType
				}
				const {
					data
				} = await this.beg.request({
					url: this.api.vipScs,
					data: this.queryForm,
				})
				this.vipList[0].num = data.payCount
				this.vipList[1].num = data.newPayUser
				this.vipList[2].num = data.payMoney
				this.vipList[3].num = data.repurchase
				this.vipList[4].num = data.newMember
				this.vipList[5].num = data.userCount
				this.vipdata = data
				this.getServerData(data)
			},
			more() {
				if (this.more_height === 140) {
					this.more_height = 280
					this.text = '收起'
					this.more_name = 'arrow-up'
				} else {
					this.more_height = 140
					this.text = '展开全部'
					this.more_name = 'arrow-down'
				}
			},
			getServerData() {
				setTimeout(() => {
					let res = {
						categories: this.vipdata.pvUvTrend.day30.pv.day,
						series: [{
								name: "浏览量",
								data: this.vipdata.pvUvTrend.day30.pv.value
							},
							{
								name: "浏览人数",
								data: this.vipdata.pvUvTrend.day30.uv.value
							},
						]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	}
</script>

<style>
</style>